<template>
	<view class="content">
		<view class="repair-add" @click="navTo('/pages/agent/user/operate-add')">新增</view>
		<view class="repair-list">
			<view class="repair-item black-word">
				<view class="item-phone">手机号</view>
				<view class="item-operate">操作</view>
			</view>
			<view class="repair-item" v-for="(item, index) in dataList" :key="index">
				<view class="item-phone">{{ item.mobile }}</view>
				<view class="item-operate" @click="operateDelete(item)">删除</view>
			</view>
		</view>
		<!-- 空白页 -->
		<!-- <empty v-if="loadingType === 'nomore' && dataList.length === 0"></empty> -->
	<!-- 	<view class="financial-list">
			<view class="financial-item" v-for="(item, index) in dataList" :key="index">
				<view class="financial-txt">
					<view class="financial-name">
						{{ item.memo }}
						<text class="financial-leval">{{ item.money }}</text>
					</view>
					<view class="financial-time">{{ item.createtime }}</view>
				</view>
			</view>
		</view> -->
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
import { operateList, addOperate, deleteOperate } from '../../../api/api.js';
export default {
	components: {
		uniLoadMore,
		empty
	},
	data() {
		return {
			loadingType: 'more', //加载更多状态
			dataList: [],
			token: '',
			page: 1
		};
	},
	onLoad(options) {
		this.loadData();
	},
	methods: {
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		//加载 ，带下拉刷新和上滑加载
		async loadData(type = 'add', loading) {
			//没有更多直接返回
			if (type === 'add') {
				if (this.loadingType === 'nomore') {
					return;
				}
				this.loadingType = 'loading';
			} else {
				this.loadingType = 'more';
			}
			let form = {
				page: this.page,
				limit: 10
			};
			let res;
			res = await operateList(form);

			let dataList = res.data.data;
			this.page++;
			if (type === 'refresh') {
				this.dataList = [];
			}

			this.dataList = this.dataList.concat(dataList);

			//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
			this.loadingType = res.data.current_page >= res.data.last_page ? 'nomore' : 'more';
			if (type === 'refresh') {
				if (loading == 1) {
					uni.hideLoading();
				} else {
					uni.stopPullDownRefresh();
				}
			}
		},
		operateDelete(item){
			uni.showModal({
				title: '提示',
				content: '确定要删除吗',
				success: (res) => {
					if (res.confirm) {
						deleteOperate({user_id:item.user_id}).then(res => {
							this.page = 1;
							this.loadData('refresh');
							uni.showToast({
								title:'删除成功'
							})
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			
			
		}
	},
	//加载更多
	onReachBottom() {
		this.loadData();
	}
};
</script>

<style lang="scss">
page,
.content {
	height: 100%;
}
.financial-list {
	padding-top: 30upx;
}

.financial-item {
	background-color: #ffffff;
	padding: 30upx;
	margin: 0 30upx 30upx;
	border-radius: 20upx;
	display: flex;
	align-items: center;
	.financial-leval {
		float: right;
		font-size: 28upx;
	}

	.image-wrapper {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}
	.financial-name {
		font-size: 28upx;
		margin-bottom: 20upx;
		&:nth-last-of-type(1) {
			margin-bottom: 0;
		}
	}
	.financial-time {
		font-size: 24upx;
	}

	.financial-txt {
		flex: 1;
		color: #333333;
	}
}

.repair-add {
	color: #3eb9ff;
	padding: 30rpx;
	text-align: right;
}
.repair-list {
	padding-left: 30rpx;
	padding-right: 30rpx;
	.repair-item {
		display: flex;
		text-align: center;
		margin-bottom: 30upx;
		color: #999999;
		.item-phone {
			flex: 1;
		}
		.item-operate {
			width: 300upx;
		}
	}
	.black-word{
		color: #333333;
		border-bottom: 1upx solid #eee;
		padding-bottom: 20upx;
	}
}
</style>
